/* 
    配置组,table,展开得到里面的配置文件
 */

 <template>
    <div>
        <!-- 数据展示.start -->
        <el-table :show-header="false" :data="resourceC"  style="width: 100%;" class="extend">
            <el-table-column prop="fileName"  label="文件名"></el-table-column>
            <el-table-column prop="createTime"  label="创建时间"></el-table-column>
            <el-table-column prop="tip" label="操作">
                <template slot-scope="scope">
                    <el-button size="small"  class="el-icon-edit" @click="openEditConfigFileDialog(scope.$index, scope.row)"></el-button>
                    <el-button size="small"  class="el-icon-delete" @click="deleteConfigFile(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
            <el-table-column></el-table-column>
        </el-table>
        <!-- 数据展示.end -->

        <!-- 修改配置文件对话框.start -->
        <el-dialog title="修改配置文件" :visible.sync="editConfigFileVisible" :close-on-click-modal="false">
            <el-form ref="editConfigFileform" :model="editConfigFileform" :rules="editConfigFileformRules" label-width="120px">
                <el-form-item label="名称" prop="editFileName">
                    <el-input :disabled="true" v-model="editConfigFileform.fileName" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="editFileContent">
                    <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 15}" v-model="editConfigFileform.fileContent"></el-input>
                </el-form-item>
                <div class="form-btn" style="text-align:right">
                    <el-button @click.native="editConfigFileVisible = false">取消</el-button>
                    <el-button type="primary" @click="editConfigFile">确定</el-button>
                </div>   
            </el-form>
        </el-dialog>
        <!-- 修改配置文件对话框.end -->
    </div>
    
</template>
<script>
//scope 是父组件传递过来的
export default {
    data() {
        const validateEditFileName = (rule, value, callback) => {
            // console.log('value=' + this.addFiileform.fileName)
            value = this.editConfigFileform.fileName;
			if (typeof value == 'undefined') {
				callback(new Error('请输入文件名'));
			} else if (value.length < 4 || value.length > 32) {
				callback(new Error('文件名长度为:4-32'));
			} else {
                callback();
            }
        };

        const validateEditFileContent = (rule, value, callback) => {
            value = this.editConfigFileform.fileContent;
			if (typeof value == 'undefined') {
				callback(new Error('请输入文件内容'));
			} else if (value.length == 0) {
				callback(new Error('请输入文件内容'));
			} else {
                callback();
            }
        };
        return {
            resourceC: [],
            editConfigFileVisible: false,
            editConfigFileform: {
                fileName: '',
                fileContent: '',
                configMapName: '',
                namespace: ''
            },
            editConfigFileformRules: {
                editFileName: [
                    { required: true, trigger: 'blur', validator: validateEditFileName }
                ],
                editFileContent: [
                    { required: true, trigger: 'blur', validator: validateEditFileContent }
                ]
            }
        };
    },
    props: {
        scope: Object, // $index/row/store  你可以看scope 这个对象，这个页面有很多简化的
    },
    mounted() {
        //scope.row 可以获取这个row的信息比如id什么的,
        //异步获取数据 赋值给 resourceC 即可
        // 加载数据
        // console.log('v-child-table=' + JSON.stringify(this.scope.row))
        // 展开行,获取数getConfigFiles据
        this.getConfigFiles();
    },
    methods: {
        openEditConfigFileDialog: function(index,row) {
            this.editConfigFileVisible = true;
            // 赋值
            this.editConfigFileform.namespace = row.namespace;
            this.editConfigFileform.configMapName = row.configMapName;
            this.editConfigFileform.fileName = row.fileName;
            this.editConfigFileform.fileContent = row.fileContent;

        },
        // 获取配置文件列表
        getConfigFiles() {
            const namespace = this.scope.row.namespace;
            const configMapName = this.scope.row.configMapName;
            if (namespace != '' && configMapName != '' && typeof namespace != undefined && typeof configMapName != undefined) {
                const getUrl = this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGFILE + '/' + namespace + '/' + configMapName;
                this.httpClient.httpClientget(getUrl,'').then(res => {
                    
                    this.resourceC = res.data;
                })
            } else {
                this.resourceC = [];
            }
        },
        // 修改配置文件内容
        editConfigFile() {
            // 简单的校验
            this.$refs.editConfigFileform.validate(valid => {
                if (valid) {
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.editConfigFileform.configMapName + ':' + this.editConfigFileform.fileName);
                    // 修改
                    // 新增
                    this.httpClient.httpClientPatch(this.projectConfig.URL_API_APP_CONFIG_UPDATE_CONFIGFILE,this.editConfigFileform).then(res => {
                       this.getConfigFiles();
                       this.editConfigFileVisible = false;
                    })
                }
            })
        },
        // 删除单个配置文件
        deleteConfigFile: function(index,row) {
            // 删除确认
            this.$confirm('此操作将永久删除此配置文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 操作审计
                this.userBaseInfo.setOperObjectName(row.configMapName + ':' + row.fileName);
                // 执行删除操作
                this.httpClient.httpClientDelete(this.projectConfig.URL_API_APP_CONFIG_DELETE_CONFIGFILE, row).then(res => {
                    // 刷新页面
                    this.getConfigFiles();
                })
            }).catch(() => {
            });
        }
    }
};
</script>